<template>
  <div class="zcx" >
    <ul>
      <li v-for="(item,index) in results" :key="index">
        <router-link :to="{path :'/car/detail/'+item.id}">
          <div class="ig"><img :src="item.img"/></div>
          <div class="fon1 clearFloat">
            <div class="left">
              <div class="ks">{{item.detail}} {{item.modelName}}</div>
              <div class="link"><em>{{item.conf}}</em></div>
              <div class="companyName">{{item.companyName}}</div>
              <div class="tag"><span>中东版</span><span>现车</span><span>迪拜</span></div>
            </div>
            <div class="price">
              <em class="pj">已有5300+人评价</em>
              <em class="fl">{{item.price| currency('￥')}}</em>
              <em class="fr">库存：{{item.count}}</em>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  import { currency } from '../../../utils/currency'
  import axios from 'axios'
    export default {
        name: "listData",
      data(){
        return {
          results:[]
        }
      },
      created:function () {
        this.getListData('','',0,10);
      },
      filters:{
        currency: currency
      },
      methods:{
          getListData:function(key,param,pageNo,pageSize){
            var params = new URLSearchParams();
            if(key != ''){
              params.append(key, param);
            }
            params.append('page', pageNo);
            params.append('rows', pageSize);
            axios.get('/api/pic-consumer-product/productCar/list',params).then((response) => {
              this.results = response.data.productList;
              console.log(response.data.productList);
            }).catch(err => {
                console.log(err);
              });
          }
      }
    }
</script>

<style lang="scss"  scoped>
  @import "../../../style/common";
  @import "../../../style/mixin";
  .zcx ul li{
    background: #fff;
    box-shadow: 0 0 10px 0 #e5e4e7;
    .ig{
      float: left;
      img{width: 2rem;vertical-align: middle;height: 2rem;}
    }
    .fon1{
      padding: 0.2rem;float: left;position: relative;width: 5.3rem;

      .left {
        .ks{line-height: 100%;color: #444;font-size: 0.30rem;margin-bottom: 0.1rem;}
        .link{margin-top: 0.12rem;}
        .companyName{margin:0.1rem 0;color:#aaa}
        .tag span{background: #ffcd79;color: #fff;font-size: 0.18rem;margin-right:0.1rem;padding: 0 0.1rem;}
        .link a{display: inline-block;padding: 0 .20rem;text-align: center;height: 0.34rem;line-height: 0.34rem;border: solid 1px #ffcd79;border-radius: 3px;color: #ee9b11;font-size: 0.18rem;margin-right: 0.12rem;}
      }
      .price {
        span{display: block;line-height: 0.4rem;color: #666;font-size: 0.22rem;text-align: left;}
        em.fl{display: block;line-height: 100%;color: #FA2F5D;font-size: 0.28rem;font-weight: bold;
          margin-top: 0.20rem;text-align: left;position: absolute;right: 0.2rem;bottom: 0.6rem;}
        em.pj{color: #aaa;}
        em.fr{font-weight: 100;color: #999;font-size: 0.22rem;}
      }
    }
  }
  .price{margin-top: 0.1rem}
  /* 汽车列表 */
  .zcar_list{
    margin-bottom: 1.3rem;overflow: hidden;margin-top: 1.8rem;
    .zlist_Car ul li{
      width:100%;flex:none;background: #fff;box-shadow: none;
      border-bottom: 1px solid #f1f1f1;
      padding: 0.2rem 0.1rem;}
  }
  .zlist_Car{
    width: 100%;overflow: hidden;margin-top: 1.6rem;
    ul{
      position:relative;display:flex;flex-wrap:wrap;justify-content:center;
      max-width:100%;margin:0 auto;padding:0 0 6em;list-style:none;display:-webkit-flex;
    }
  }
  .zlist_Car ul li{
    a{
      background: #fff;box-shadow: 0 0 10px 0 #e5e4e7;display: block;color: #666;
      .link em{
        display: inline-block;padding: 0 .20rem;text-align: center;height: 0.34rem;line-height: 0.34rem;
        border: solid 1px #ffcd79;border-radius: 3px;color: #ee9b11;font-size: 0.18rem;margin-right: 0.12rem;
      }
    }
    .fon1 .left .ks{font-size: 0.26rem;font-weight: 100;line-height: 0.3rem;}
  }
</style>
